<template>
  <div>
    <TopBar></TopBar>
    <van-popup v-model="show" position="left" :overlay="false">
        <van-nav-bar title="大师列表" fixed left-arrow
        @click-left="show=!show">
        </van-nav-bar>
        <template v-for="item in masterData">
          <MasterCard :data="item" :key="item.id"></MasterCard>
        </template>

    </van-popup>
    <HomeSwiper class="HomeSwiper" :img="img"></HomeSwiper>
    <div class="class-box">
      <van-icon @click="show=!show" name="flower-o" size="3rem"></van-icon>
      <van-icon @click="show=!show" name="flower-o" size="3rem"></van-icon>
      <van-icon @click="show=!show" name="flower-o" size="3rem"></van-icon>
    </div>
    <div class="main-list">
        <div v-for="item in activeData" :key="item.id">
            <HomeActivityCard class="HomeActivityCard" :data='item'></HomeActivityCard>
        </div>
    </div>
  </div>
</template>

<script>
import HomeSwiper from '@/components/HomeSwiper.vue'
import HomeActivityCard from '@/components/HomeActivityCard.vue'
import TopBar from '@/components/TopBar.vue'
import MasterCard from '@/components/MasterCard.vue'

export default {
  name: 'Home',
  data () {
    return {
      img: [
        {
          img:
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560335249815&di=a90404526712045b77c0575af7b3a52b&imgtype=0&src=http%3A%2F%2Fi3.lis99.com%2Fupload%2Ftopicsimages%2F0%2F4%2Fc%2F04c4794e891412ab396545913d663ddc.jpg'
        },
        {
          img:
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560334683040&di=6630eb041fc4f5d4230fc32682de0302&imgtype=0&src=http%3A%2F%2Fattachments.gfan.net.cn%2Fforum%2F201806%2F04%2F203737ntdan6cjdndt7a67.jpg'
        },
        {
          img:
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560335316668&di=b73a442a46290f7c90f660502ac02334&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F52e4763c2931f.jpg'
        }
      ],
      active: 0,
      activeData: [],
      show: false,
      masterData: []
    }
  },
  methods: {
    Onchange (activeIndex) {
      console.log('activeIndex :', activeIndex)
    }
  },
  components: {
    HomeSwiper,
    HomeActivityCard,
    TopBar,
    MasterCard
  },
  mounted: function () {
    this.$axios.get('/api/lists/mod/acmrecom')
      .then((result) => {
        this.activeData = result.data
      }).catch((err) => {
        console.log('err :', err)
      })
    this.$axios.get('/api/lists/mod/master').then(response => {
      this.masterData = response.data.slice(1, 4)
    })
  }
}
</script>

<style scoped>
.HomeSwiper {
  margin-top: 46px;
}
/* .van-nav-bar{
        position: fixed;
        width: 100%;
        top: 0;
    } */
.class-box {
  height: 5rem;
  margin-top: 1rem;
}
.class-box .van-icon{
  width: 33%;
  text-align: center;
  line-height: 5rem;
}
.main-list {
    /* background-color: cadetblue; */
    padding-top: 1rem;
    margin-bottom: 5rem;
}
.long{
    height: 40rem;
}
.tabbar-share{
    transform: scale(1.2);
    margin-top: -2px;
    border-radius: 50%;
}
.HomeActivityCard{
    margin: 0.5rem;
    margin-bottom: 2rem;
}
.van-popup{
    height: 100%;
    width: 100%;
}
</style>
